<template>
  <a-tooltip placement="bottom">
    <template slot="title">
      <span>加粗</span>
    </template>
    <div :style="style" class="font-border" @click="toggleBold">
      <span :class="['iconfont', {'iconfont-disabled': disabled, 'iconfont-bold': bold + '' === '400'}]">&#xe610;</span>
    </div>
  </a-tooltip>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'FontBolder',
  model: createModelForVue(),
  props: {
    selection: createProps(Object, undefined),
    value: createProps(String),
    disabled: createProps(Boolean),
  },
  methods: {
    toggleBold() {
      if (this.value + '' === '1000') {
        this.$emit('change', '400');
        this.selection && this.selection.setStyle && this.selection.setStyle('fontWeight', '400')
      } else {
        this.$emit('change', '1000');
        this.selection && this.selection.setStyle && this.selection.setStyle('fontWeight', '1000')
      }
    },
  },
  computed: {
    bold: {
      get() {
        return this.value + '' === '1000';
      },
      set(v) {

      },
    },
    style() {
      return {
        '--back': this.value + '' === '1000' ? '#707070' : ''
      }
    },
  }
}
</script>
<style scoped>
.font-border {
  color: white;
  cursor: pointer;
  background: var(--back);
  height: 25px;
  width: 25px;
  border-radius: 4px;
  text-align: center;
}

.iconfont-bold {
  background: red;
}

.iconfont-disabled {
  color: #707070;
  cursor: not-allowed;
}
</style>